<template>
  <el-dialog
    v-loading="loading"
    :title="type == 'add' ? '创建学科专业组' : '编辑学科专业组'"
    :visible="open"
    width="600px"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    destroy-on-close
    append-to-body
    @close="cancel()"
  >
    <el-form
      @submit.native.prevent
      ref="form"
      :model="form"
      :rules="rules"
      label-width="130px"
    >
      <div class="formItem"><span>分院</span>{{ branch.branchName }}</div>
      <el-form-item label="学科专业组名称" prop="disciplineGroupName">
        <el-input
          v-model="form.disciplineGroupName"
          maxlength="20"
          show-word-limit
          clearable
          placeholder="请输入学科专业组名称"
        />
      </el-form-item>

      <el-form-item label="学科专业组组长" prop="leaderId">
        <el-select
          filterable
          style="width: 390px"
          v-model="form.leaderId"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="(item, index) in teachers"
            :key="index"
            :label="item.name"
            :value="item.teacherId"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button v-preventReClick @click="cancel">取 消</el-button>
      <el-button
        v-preventReClick
        type="primary"
        v-if="type == 'add'"
        @click="submitForm('save')"
      >
        保 存
      </el-button>
      <el-button
        v-preventReClick
        type="primary"
        @click="submitForm('saveAndOpen')"
      >
        {{ type == 'add' ? '启 用' : '确 定' }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { allTeacherList } from '@/api/course/course'
import {
  disciplineGroup_post,
  disciplineGroup_info,
  disciplineGroup_put,
  disciplineGroup_changeStatus
} from '@/api/disciplineGroup/disciplineGroup'

export default {
  components: {},
  props: {
    open: Boolean,
    type: String,
    id: [String, Number],
    branch: Object
  },
  data() {
    return {
      submited: false,
      loading: false,
      // 表单参数
      form: {
        disciplineGroupName: undefined,
        leaderId: undefined,
        branchId: undefined
      },
      // 表单校验
      rules: {
        disciplineGroupName: [
          {
            required: true,
            message: '学科专业组名称不能为空',
            trigger: 'blur'
          }
        ],
        leaderId: [
          {
            required: true,
            message: '学科专业组组长不能为空',
            trigger: 'blur'
          }
        ]
      },
      //   分院列表
      teachers: []
    }
  },
  watch: {
    async open(e) {
      if (e) {
        this.reset()
        this.submited = false
        await this.getTeachers()
        if (this.type == 'edit') {
          this.getDisciplineGroup()
        }
      } else {
        if (!this.submited) {
          this.$modal.msgInfo('已取消')
        }
      }
    }
  },
  methods: {
    // 获取学科专业组详情xx

    async getDisciplineGroup() {
      this.loading = true
      try {
        let res = await disciplineGroup_info(this.id)
        if (res.code == 200) {
          this.form = res.data
        }
      } finally {
        this.loading = false
      }
    },
    // 获取所有教师
    async getTeachers() {
      this.loading = true
      try {
        let res = await allTeacherList({
          pageSize: 9999,
          pageNum: 1
        })
        if (res.code == 200) {
          this.teachers = res.rows
        }
      } finally {
        this.loading = false
      }
    },
    // 取消按钮
    cancel() {
      // 已取消

      this.$emit('update:open', false)
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        disciplineGroupName: undefined,
        leaderId: undefined,
        branchId: undefined
      }
      this.resetForm('form')
    },
    /** 提交按钮 */
    submitForm: function(status) {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.submited = true
          this.form.schoolId = this.$store.getters.schoolId
          if (this.type == 'edit') {
            disciplineGroup_put(this.form).then(() => {
              this.$modal.msgSuccess('修改成功')
              this.$emit('update:open', false)
              this.$emit('refreshCommon', this.form)
            })
          } else {
            this.form.branchId = this.branch.branchId
            //  启用
            if (status == 'saveAndOpen') {
              this.$confirm('启用后课程可选择该学科专业组', '启用确认', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
              })
                .then(async() => {
                  let res = await disciplineGroup_post(this.form)
                  await disciplineGroup_changeStatus({
                    status: 0,
                    disciplineGroupId: res.data.disciplineGroupId
                  })
                  this.$modal.msgSuccess(`启用成功`)
                  this.$emit('update:open', false)
                  this.$emit('refreshCommon', this.form)
                })
                .catch(() => {
                  this.$modal.msgInfo('已取消')
                })
            }
            // 保存
            else {
              disciplineGroup_post(this.form).then(() => {
                this.$modal.msgSuccess(`保存成功`)
                this.$emit('update:open', false)
                this.$emit('refreshCommon', this.form)
              })
            }
          }
        }
      })
    }
  },
  created() {
  },
  mounted() {
  }
}
</script>
<style scoped lang="scss">
.formItem {
  line-height: 36px;
  margin-bottom: 20px;
  font-weight: 600;

  span {
    margin-left: 20px;
    margin-right: 15px;
    font-weight: 600;
    font-size: 14px;
    color: #606266;
  }
}
</style>
